<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow">
            <a-form size="small" :model="query" layout="inline">
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
                <a-form-item label="班次">
                    <a-select popup-container="html"  class="bacClass" v-model="query.shift">
                        <a-option :value="0">白班</a-option>
                        <a-option :value="1">晚班</a-option>
                    </a-select>
                </a-form-item>
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button @click="addList">保存</el-button>
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
            <el-calendar ref="calendar" v-model="dateObj">
                <template #header="{ date }">
                    <span>{{ date }}</span>
                    <el-button-group>
                        <el-button size="small" @click="selectDate('prev-month')">
                            上月
                        </el-button>
                        <el-button size="small" @click="selectDate('today')">当天</el-button>
                        <el-button size="small" @click="selectDate('next-month')">
                            下月
                        </el-button>
                    </el-button-group>
                </template>
                <template #date-cell="{ data }">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split('-').slice(1).join('-') }}
                        {{ data.isSelected ? '✔️' : '' }}
                        <a-input-number v-if="data.day <= getLastDayend(dateObj) && data.day >= getLastDayStart(dateObj)"
                            class="bacClass" :min="0" v-model="dataList[data.day]">
                            <template #prefix>
                                目标产量:
                            </template>
                        </a-input-number>
                    </p>
                </template>
            </el-calendar>
        </div>

    </div>
</template>
    
<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
const headerShow = ref<boolean>(true)

const calendar = ref()
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
    selectList()
}

const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: '', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.firmId = corporateId
    query.firm = corporateLabel
    query.sectorId = sectorId
    query.sectorLabel = sectorLabel
}


//getlist初始化接口参数
let query: any = reactive({
    firmId: 32,
    firm: '',
    sectorId: 32,
    sectorLabel: '',
    shift: 0
})

const dataList: any = reactive({})

const dateObj: any = ref(new Date())

//初始化
// onMounted(() => {
//     getList()
// })

// watch(()=>dateObj.value,()=>{
//     getList()
// })

function getLastDayStart(date: any) {
    var y: any = date.getFullYear(); //获取年份
    var m: any = date.getMonth() + 1; //获取月份
    var d: any = '01'
    m = m < 10 ? '0' + m : m; //月份补 0

    return [y, m, d].join("-")
}


function getLastDayend(date: any) {
    var y: any = date.getFullYear(); //获取年份
    var m: any = date.getMonth() + 1; //获取月份
    var d: any = new Date(y, m, 0).getDate(); //获取当月最后一日
    m = m < 10 ? '0' + m : m; //月份补 0
    d = d < 10 ? '0' + d : d; //日数补 0

    return [y, m, d].join("-")
}

const dataObjList: any = ref()

const getList = () => {
    selectList()
}

function selectList() {
    post({
        url: 'org/monthlyGoal/getMonthlyGoalList',
        data: {
            "dateStart": getLastDayStart(dateObj.value),
            "dateEnd": getLastDayend(dateObj.value),
            "firmId": query.firmId, //公司ID
            "firm": query.firm, //公司
            "departmentId": query.sectorId, //部门Id
            "department": query.sectorLabel, //部门名称
            "shift": query.shift //班次
        }
    }).then((res: any) => {
        dataObjList.value = res.data
        if (res.code == 200) {
            res.data.forEach((v: any) => {
                dataList[v.recordDate] = v.goalYield
            })
        } else {
            Message.warning('查询条件必填')
        }
    })
}

const addList = () => {

    let objList = dataObjList.value.map((res: any) => {
        return {
            "id": res.id,
            "recordDate": res.recordDate,
            "firm": res.firm,
            "firmId": res.firmId,
            "department": res.department,
            "departmentId": res.departmentId,
            "shift": res.shift,
            "goalYield": dataList[res.recordDate]
        }
    })
    post({
        url: 'org/monthlyGoal/saveMonthlyGoal',
        data: objList
    }).then((res: any) => {
        if (res.code == 200) {
            selectList()
            Message.success(res.message)
        } else {
            Message.warning(res.message)
        }
    })
}
</script>
<style lang="less" scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.is-selected {
    color: #1989fa;
}

.bacClass {
    background-color: #fff !important;
    border: none !important;
}

:deep(.el-calendar-table) {
    width: 100%;
    height: 100%;

    &:not(.el-calendar-table__row) {

        td.next {
            pointer-events: none;
        }

        td.prev {
            pointer-events: none;
        }

        // td{
        //     pointer-events: none;
        // }
    }
}
</style>
    